<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>产品列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="../include/cssheader.jsp"%>
<link rel="stylesheet" href="${contextPath }/css/style.css">
</head>
<body>
	<c:set var="product_list_selected" value="menu-selected" />
	<c:set var="title" value="${company.name }"/>
	<c:set var="information" value="${company.description }"/>
	<!-- black line from top -->
	<div class="header-blackLine"></div>
	<div class="container">
		<%@include file="../include/header.jsp"%>
	</div>
	<!-- /.container -->
	<%@include file="../include/header-bar.jsp"%>
	<div class="container portofolio-js">
		<div class="row">
			<div class="span12 portofolio-filters">
				<a href="#" class="portofolio-filterSelected" id="portofolio-all">最新产品</a> <a href="#"
					id="portofolio-brands"
				>按地区</a> <a href="#" id="portofolio-graphic">按浏览量排序</a>
			</div>
		</div>
		<c:forEach items="${products }" var="product">
			<div class="row portofolio-item portofolio-imageAndInfoRow portofolio-web">
				<div class="span6">
					<div class="image-wrap">
						<a href="#modal"> <img src="${product.product.images }&width=460&height=253"
							alt="${product.product.name }" height="253"
						/> </a>
					</div>
				</div>
				<div class="span6 ">
					<div class="portofolio-imageGridTitle">
						<h3>${product.product.name }</h3>
					</div>
					<div class="portofolio-projectMeta">
						<c:forEach items="${product.attrs }" var="attr">
							<span class="tag">${attr.name}: ${attr.value }</span>
						</c:forEach>
					</div>
					<div class="portofolio-imageGridContent">${product.product.description }</div>
					<a href="${contextPath }/product_detail.do?id=${product.product.id}" class="black-link">产品详情</a>
				</div>
			</div>
		</c:forEach>
		<div class="row">
			<div class='span4'></div>
			<div id="paginate" style="width: 60%;float: left;"></div>
		</div>
	</div>
	<!-- The modal windows -->
	<div style="display: none">
		<!-- first modal window ( all links with href="#modal0" will open this window )-->
		<div id="modal" class="fancy-modal">
			<div class="container responsive-center">
				<div class="row">
					<div class="span6">
						<div class="portofolio-imageGridTitle">
							<h3></h3>
						</div>
						<div class="portofolio-projectMeta"></div>
						<div class="portofolio-imageGridContent"></div>
					</div>
					<div class="span6 aligncenter">
						<img alt="" />
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- footer -->
	<%@include file="../include/footer.jsp" %>
	<%@include file="../include/jsfooter.jsp"%>
	<script type="text/javascript" src="${contextPath }/js/jquery.paginate.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#paginate').paginate({
			count: ${totalPage},
			start: ${pageNo},
			display: 12,
			border: false,
			text_color  			: '#79B5E3',
			background_color    	: 'none',	
			text_hover_color  		: '#2573AF',
			background_hover_color	: 'none', 
			images		: false,
			mouse		: 'press',
			onChange: function(page) {
				window.location.href = contextPath + "/${cId}/list.do?pageNo=" + page + "&pageSize=${pageSize}";
			}
			});
		});
	</script>
</body>
</html>
